<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="无注册、仅十条">
    <title>十条: 聊天就要小而美</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-head">
            <div id="logo">十条</div>
            <div id="systemDiv"></div>
            <div id="connection-status" class="connection-status"></div>
        </div>
        <div id="chat-box"></div>
        <div class="input-container">
            <input type="text" id="message-input" placeholder="这里输入消息(100字以内)" autocomplete="off" maxlength="100">
            <button id = "submit-message">发送</button>
        </div>
        <div class="media-controls">
            <button id="submit-image">图片</button>
            <button id="record-audio" class="record-button">语音</button>
            <button id="submit-file" class="show-upload">文件</button>
            <div class="qrcode-container">
                <img id="qrcode-small" class="qrcode-small" src="" alt="Chat Room QR Code" />
            </div>
            <div><a href="index.html" target="_blank">主页</a></div>
            <input type="file" id="file-input">
            <input type="file" id="file-input">
        </div>
        <div class="overlay" id="overlay"></div>
        <div id="toast" class="toast"></div>
    </div>
    <div class="qrcode-overlay" id="qrcode-overlay">
        <img id="qrcode-large" class="qrcode-large" src="" alt="Large QR Code" />
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const currentUrl = encodeURIComponent(window.location.href);
            const qrcodeSmall = document.getElementById('qrcode-small');
            const qrcodeLarge = document.getElementById('qrcode-large');
            const qrcodeOverlay = document.getElementById('qrcode-overlay');

            // Set QR code image sources
            const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${currentUrl}&size=256x256`;
            qrcodeSmall.src = qrCodeUrl;
            qrcodeLarge.src = qrCodeUrl;

            // Click to show large QR code
            qrcodeSmall.addEventListener('click', function() {
                qrcodeOverlay.style.display = 'flex';
            });

            // Click on overlay to hide
            qrcodeOverlay.addEventListener('click', function() {
                qrcodeOverlay.style.display = 'none';
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.0/spark-md5.min.js"></script>
    <script src="script.js"></script>
</body>
</html>